<div id="app">
  <div class="p2 flex">
    <a href="javascript:history.go(-1)" class="weui-btn weui-btn_mini weui-btn_default"> 返回 </a>
    <div style="flex: 1"></div>
    <div class="weui-btn weui-btn_mini weui-btn_warn" @click="showEditPoint=true">修改积分</div>
  </div>

  <div class="flex items-center m1 p1 bg-silver rounded">
    <div style="flex: 1" class="font-16 bold">{{userinfo.nickname}}</div>
    <div>当前积分: <span class="font-16 bold orange">{{point}}</span></div>
  </div>
  <div>
    <div style="color: #9c8484" class="flex items-center font-13">
      <div class="p2" style="flex: 1">积分记录</div>
      <div class="p2">积分变动</div>
    </div>

    <div v-for="log in logs" class="flex items-center">
      <div class="p2" style="flex: 1">
        <div class="font-14 bold">{{log.desc}}</div>
        <div class="gray font-12">{{log.createTime}}</div>
      </div>
      <div class="p2 flex items-center" v-bind:class="{red:log.point>0, green: log.point<0}">
        <img src="/img/red/coin.png" style="width: 18px; height: 18px" />
        <div class="font-18 bold right-align" style="width: 40px">{{log.point}}</div>
      </div>
    </div>

    <div v-if="logs.length==0" class="gray my2 center">
      <img src="/img/empty.png" style="width: 150px" />
      <div class="font-12 bold">没有更多数据了</div>
    </div>
  </div>
  <!-- <div class="p2 font-12 gray center">到底了~</div> -->

  <div v-show="showEditPoint">
    <div class="weui-mask" @click="showEditPoint = false"></div>
    <div class="weui-half-screen-dialog">
      <div class="weui-half-screen-dialog__hd">
        <div class="weui-half-screen-dialog__hd__main">
          <strong class="weui-half-screen-dialog__title"> 修改积分 </strong>
        </div>
      </div>
      <div class="weui-half-screen-dialog__bd">
        <div class="weui-cells__title">当前积分 {{point}}, 扣减积分请输入负数, 前面加上 - 号</div>
        <div class="weui-cells">
          <div class="weui-cell">
            <div class="weui-cell__hd">
              <label class="weui-label">变动积分</label>
            </div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="number" placeholder="输入变动积分" v-model="inputPoint" />
            </div>
          </div>
        </div>
      </div>
      <div class="weui-half-screen-dialog__ft">
        <div class="weui-btn weui-btn_primary" @click="savePoint">保存</div>
      </div>
    </div>
  </div>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      contactid: "<%=contactid%>",
      showEditPoint: false,
      logs: [],
      inputPoint: "",
      point: 0,
      userinfo: {},
    },
    created: function () {
      this.refresh();
    },
    methods: {
      refresh: function () {
        let that = this;
        axios
          .get("/client/user/" + this.contactid + "/logs")
          .then(function (res) {
            that.logs = res.data.logs;
            that.userinfo = res.data.userinfo;
            that.point = res.data.point;
          });
      },
      savePoint: function () {
        let that = this;
        axios
          .post("/client/user/" + this.contactid + "/savepoint", {
            inputPoint: this.inputPoint,
          })
          .then(function (res) {
            that.showEditPoint = false;
            weui.toast("修改成功", 400);
            that.refresh();
          });
      },
    },
  });
</script>